<template>
  <div class="index">
    <div class="left">
      <!-- 后台管理系统，菜单，就写这 -->
      <ul>
        <li :class="[index==0?'active':'']" @click="index=0">管理中心</li>
        <li :class="[index==1?'active':'']" @click="index=1">商品管理</li>
        <li :class="[index==2?'active':'']" @click="index=2">会员管理</li>
      </ul>
    </div>
    <div class="right">
      <!-- 头部 -->
      <v-header></v-header>
      <!-- 主体 -->

      <div class="main">
        <v-glzx v-if="index == 0"></v-glzx>
        <v-spgl v-if="index == 1"></v-spgl>
        <v-hygl v-if="index == 2"></v-hygl>
      </div>

      <!-- footer -->
      <v-footer></v-footer>
    </div>
  </div>
</template>

<script>
import vHeader from "./vHeader.vue";
import vFooter from "./vFooter.vue";
import vHygl from "./hygl.vue";
import vSpgl from "./spgl.vue";
import vGlzx from "./glzx.vue";
export default {
  components: {
    vHeader,
    vFooter,
    vHygl,
    vSpgl,
    vGlzx
  },
  data() {
    return {
      index: 0
    };
  }
};
</script>

<style>
.index {
  display: flex;
}
.left {
  background-color: rgb(0, 21, 42);
  width: 200px;
  height: 100vh;
}
.left li {
  line-height: 60px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.left li.active {
  background: blue;
}
.right {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
}
</style>